<template>
    <div class="main">

        <el-carousel height="400px">
            <el-carousel-item v-for="(img,aa) in imgList" :key="aa">
                <img :src="img.url" style="height:100%;width:100%">
                <p id="a" style="color: #FFFFFF;font-size: 25px;">{{img.info}}</p>
                <h3 id="a" style="color: #FFFFFF;font-size: 25px;">{{img.info1}}</h3>
            </el-carousel-item>
        </el-carousel>
        <el-container>
            <!-- 查询排班医生         -->
            <el-aside width="200px">
                <div style="height:400px;width:400px;margin-top:80px">
                    <el-date-picker v-model="arrangeTime" type="date" placeholder="选择排班日期" :picker-options="dateRange"
                        format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :clearable="false" style="width: 200px;"
                        @change="findAllDoctors">
                    </el-date-picker>
                </div>
            </el-aside>
            <el-main>
                <h3>今日新闻</h3>
                <el-divider></el-divider>
                <div class="news">黄强代表省委省政府看望慰问一线医务人员，向全省广大医务工作者致以节日问候和崇高敬意</div>
                <div class="news">四川大学华西医院马边医院干部任命暨调研会顺利举行</div>
                <div class="news">中国（四川）第23批援莫桑比克医疗队在马普托中心医院开展微创手术指导工作</div>
                <div class="news">心脏大血管外科成功分期实施体外循环下冠状动脉旁路移植+3D打印辅助下体外精准开窗多内脏分支支架植入胸腹主动脉瘤全腔内修复术</div>
                <el-divider></el-divider>

                <!-- 卡片展示医生信息 -->
                <el-row>
                </el-row>
                <el-row>
                    <div :span="5" v-for="(o, index) in cards" :key="index" style="cursor:pointer">
                        <el-col :span="6">
                            <el-card style='margin-top:10px' shadow="hover" :body-style="{ padding: '10px' }">
                                <img :src="o.doctorPic" style="width:260px;height:260px;">
                                <div style="padding: 14px;">
                                    <span>{{o.doctorName}}</span>
                                    <div class="bottom clearfix">
                                        <div class="time">{{o.doctorText}}</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </div>
                </el-row>


            </el-main>

        </el-container>
        <!--   分页         -->
        <el-pagination layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size"
            :current-page="pageData.current" @current-change="handleChange" style="margin-left:450px">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                imgList: [{
                        url: "https://tse1-mm.cn.bing.net/th/id/R-C.0e5ef4d6d36aac154b213d277fb85131?rik=7IlmGrzTl%2fZvAA&riu=http%3a%2f%2ftruemessages.com%2fwp-content%2fuploads%2f2015%2f01%2fHospital-Pictures-2.jpg&ehk=UH3p6WTYJbX%2fo%2bMuoY0FNd8wVoL6w6Q0lFWLnVWR5Y4%3d&risl=&pid=ImgRaw&r=0",
                        info: "第一张",
                        info1: "第一张图"
                    },
                    {
                        url: "https://healthcaresnapshots.com/wp-content/uploads/sites/5/2019/09/detroit-medical-center-heart-hospital-9-1050x750.jpg",
                        info: "第二张",
                        info1: "第二张图"
                    },
                    {
                        url: "https://tse1-mm.cn.bing.net/th/id/R-C.306c15f4879b1b6e6762095b9cd72d87?rik=syAafmeVImVqNw&pid=ImgRaw&r=0",
                        info: "第三张",
                        info1: "第三张图"
                    },
                    {
                        url: "https://tse1-mm.cn.bing.net/th/id/R-C.8d49bdef7e50668ef04c532388be4e7f?rik=xEEV6cWA75rhEA&pid=ImgRaw&r=0",
                        info: "第四张",
                        info1: "第四张图"
                    }
                ],
                calendar: new Date(),
                img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                currentDate: new Date(),
                cards: [{
                    doctorName: "",
                    doctorText: "",
                    doctorPic: ""
                }],
                dateRange: {
                    disabledDate(time) {
                        return new Date(time).getTime() < new Date().getTime()
                    }
                },
                arrangeTime: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
                doctors: "",
                pageData: {
                    size: 4,
                    total: 0,
                    current: 1
                },
            }
        },
        methods: {
            login() {
                this.$router.push({
                    path: '/login'
                })
            },
            toDetail() {

            },
            findAllDoctors() {
                this.$http.get("http://localhost:8088/findDoctorsByArrangeTime", {
                        params: {
                            arrangeTime: this.arrangeTime,
                            current: this.pageData.current,
                            size: this.pageData.size
                        }
                    })
                    .then((resp) => {
                        console.log(resp.data.data.records)
                        this.cards = resp.data.data.records
                        this.pageData.total = resp.data.data.total

                    }).catch((err) => {
                        console.log(err)
                    });
            },
            handleChange(data) {
                console.log(data);
                this.pageData.current = data;
                this.findAllDoctors();
            },
        },
        mounted() {
            this.findAllDoctors()
        }

    };
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .news {
        font-size: 16px;
        color: dimgrey;
        margin-top: 15px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        cursor: pointer;
    }
</style>